<template>
  <div class="video">
    <main-tab-bar v-bind:newindex="3"></main-tab-bar>
    <div class="content">
        <div class="video-item" v-for="(item,index) in url" :key="index">
          <div class="top">
            <p>{{name[index]}}-{{artistname[index]}}</p>
          </div>
          <div class="main">
            <video id="videobody"
                   class="video-js vjs-default-skin vjs-big-play-centered"  :src="item" controls
            :poster = cover[index] preload="auto"
            ></video>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
    import BScroll from 'better-scroll'
    import MainTabBar from "../../components/content/maintabbar/MainTabBar";
    import {getMv, getMvTop} from "../../network/video";

    export default {
        name: "Video",
        components: {
            BScroll,
            MainTabBar,
        },
        data() {
            return {
                newindex:3,
                data:{},
                cover:[],
                url:[],
                name:[],
                artistname:[],
            }
        },
        mounted() {
          this.getTop()
        },
        methods:{
            getTop(){
              getMvTop().then(res=>{
                  // console.log(res.data.data)
                  this.data = res.data.data;
                  this.cover.push(res.data.data.cover)
                  this.mvGet()
              })
            },
            mvGet(){
                this.data.forEach(item=>{
                    this.name.push(item.name)
                    this.artistname.push(item.artistName)
                    getMv(item.id).then(res=>{
                        this.url.push(res.data.data.url)
                    })
                })
            },
        },
    }
</script>

<style scoped>
  .video {
    width: 100%;
    margin-top: 15px;
  }

  .content{
    width: 100%;
    padding-top: 44px;
  }

  .video-item{
    width: 100%;
    margin-bottom: 20px;
  }

  .top{
    width: 95%;
    margin: 0 auto;
    margin-bottom: 5px;
  }

  .top p{

  }

  .main{
    width: 100%;
    text-align: center;
    margin: 0 auto;
    border-radius: 15px;
  }

  #videobody{
    width: 95%;
    border-radius: 10px;
  }
</style>